*{
  margin: 0;
  padding: 0;
}
body,html {

}
.tab{
  width:100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.tab ul{
  list-style: none;

}
.tab ul li {
    /* width:80px; */
    float: left;
    margin-right:25px;
    color:gray;
    font-size: 18px;
    /* font-weight: 500; */
    position: relative;
}
.tab span {
  /* display: block; */
  /* flex:1; */
  text-align:right;
  background-color:gainsboro;
  padding:5px;
  font-size:10px;
  border-radius: 10px;
}
.active {
  color:black;
  font-weight: bold;
}
.active::after {
  content: '';
  display: block;
  width:100%;
  height:3px;
  background-color: brown;
  position: absolute;
  top:30px;
  /* left:50%; */
}
.center{
  text-align: center;
}